<template>
    <div id="app">
        <router-link to="/toplist/123">排行榜</router-link>
        |
        <router-link to="/playlist">歌单</router-link>
        |
        <router-link to="/list">列表</router-link>
        |
        <router-link to="/discover">发现</router-link>
        |
        <router-link to="/counter">vuex计数器</router-link>
        |
        <button @click="handleClick">一个朴实无华的按钮</button>

        <router-view></router-view>
    </div>
</template>
<script>
export default {
    methods: {
        handleClick() {
            //点击这个按钮跳转到list页面
            // console.log('泰裤辣')

            console.log(this.$router)

            //使用js来控制页面跳转的方式叫做编程式导航

            //push

            //直接跳转页面

            // this.$router.push('/list')

            //  ---------------分割线-------------

            // 跳转页面需要传递参数:

            // query ?xxx=xx
            // this.$router.push({ path: '/list', query: { age: 40 } })
            // this.$router.push({ path: '/list?age=40' })

            // params:
            //如果要传递params不可以通过path来进行跳转,要使用name来进行跳转
            //vue3不能使用,vue2中可以使用
            // this.$router.push({ name: 'list', params: { hobby123: '泰裤辣' } })

            //query和params传参的区别:

            //1.query传递参数,刷新页面不会丢失

            //2.param刷新页面,参数会丢失

            //3.为什么?因为params传递参数是依赖于内存进行传递的,而query是拼接在地址栏,刷新也不会丢失


            //replace 会替换历史记录

            //go(number) 横跨历史记录

            //back 返回

            //forward 前进

        }
    }
}
</script>